<template>
  <el-container direction="vertical" class="b">
    <router-view></router-view>
    <div class="top">
      <span v-text="text1"></span> &nbsp;
      <el-switch
        :disabled="disabled"
        v-model="value2"
        active-color="#13ce66"
        inactive-color="#ff4949"
      ></el-switch>
    </div>
  </el-container>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value2: true,
      text1: "舞台",
      disabled: false
    };
  },
  watch: {
    value2() {
      this.onChange()
    }
  },
  methods: {
    async onChange() {
      if (this.value2) {
        this.text1 = "舞台";
        this.$router.push("/");
      } else {
        this.text1 = "代码";
        this.$router.push("/blocks");
      }
      this.disabled = true
      await des(3000)
      this.disabled = false
    }
  },
};

function des(time) {
  return new Promise(r => {
    setTimeout(function(){
      r()
    }, time);
  });
}
</script>



<style>
* {
  margin: 0;
  padding: 0;
}
.b {
  height: 100%;
}
.top {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: bold;
  color: hsla(0, 100%, 100%, 1);
}
</style>
